<template>
	<view>
		<cu-custom v-if="customShow" bgColor="bg-ededed" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">附近的人</block>
		</cu-custom>
		<scroll-view class="scrollPage" scroll-y="true" :style="'height:'+(winHeight-barHeight)+'px'" 
		@refresherrefresh="refresh" @scrolltolower="loadMore"
		refresher-enabled="true" refresher-background="#bg-ededed" :refresher-triggered="refresher_triggered">
			<common-view :needLogin="hasLogin?'n':'y'" :zindex="997" :animationClass="animation" @closeAnimation="closeAnimation" :indicator="indicator"></common-view>
			<view v-if="nearbyUserData && nearbyUserData.length>0">
				<view>
					<view style="height:1upx;"></view>
					<view class="cu-list menu menu-avatar">
						<view  @click="select(index)" class="cu-item arrow" style="padding-left:24upx;height:104upx;" v-for="(item,index) in nearbyUserData" :key="index">
							<view class="cu-avatar radius lg" style="height:70upx;width:70upx;left:24upx;border-radius:6upx;" :style="[{backgroundImage:'url('+item.avatar+'_200'+')'}]">
								<!-- <view class="cu-tag badge" style="left:auto;top:-2upx;right:-2upx;" :style="'background-color:'+(item.online_status=='online'?'#39b54a':'#aaaaaa')+';'"></view> -->
							</view>
							<view class="content flex-direction" style="line-height:1.4em;">
								<view class="text-cut" style="font-size:26upx;">{{item.username}}</view>
								<view class="text-xs text-gray">{{item.distance}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="p<allPage" style="display:flex;justify-content:center;margin:30upx 0;">
					<view class="preloader" style="width:60upx;height:60upx;"></view>
				</view>
				<view class="cu-tabbar-height"></view>
			</view>
			<block v-else>
				<view v-if="indicator==0 && !refresher_triggered && nearbyUserData.length==0" style="height:100upx;" class="flex flex-direction justify-center align-center">
					<view class="text-center text-grey text-sm">暂无附近的人</view>
				</view>
			</block>
			
		</scroll-view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	import nearbyObj from 'model/nearbyModel.js';
	let disp = require("common/broadcast");
	let me = null;
	export default {
		data() {
			return {
				indicator: 2,
				animation:'',
				customShow:0,
				barHeight:0,
				refresher_triggered:false,
			
				nearbyUserData:[],
				
				p: 1,
				limit: 20,
				allPage: 1,
			};
		},
		onLoad() {
			me = this;
			this.barHeight = this.NativeBar;
			//#ifdef H5 || MP-BAIDU || MP-TOUTIAO || MP-WEIXIN
			this.customShow = 1;
			this.barHeight = this.CustomBar;
			//#endif
		},
		onReady() {
			me.getData(0);
		},
		computed: {
			...mapState({
				winHeight: ({
					baseModule
				}) => baseModule.winHeight,
				hasLogin: ({
					userModule
				}) => userModule.hasLogin,
				userInfo: ({
					userModule
				}) => userModule.userInfo,
			})
		},
		methods:{
			...mapMutations(['chatModule/setChatTo']),
			closeAnimation() {
				this.animation = "";
				this.indicator = 0;
			},
			loadMore() {
				if (this.p >= this.allPage) {
					return false;
				}
				this.p = this.p + 1;
				this.getData(0);
			},
			refresh(){
				this.refresher_triggered = true;
				this.getData(1);
			},
			getData(is_refresh){
				if (is_refresh) {
					me.p = 1;
				}
				nearbyObj.nearbyUserLst(me,{
					limit:me.limit,
					page:me.p,
					lon:102.77836,
					lat:24.93411
				}).then(res => {
					
					if (is_refresh) {
						me.nearbyUserData=res.list;
						uni.showToast({
							title: '刷新成功',
							image: '../../static/successed.png',
							duration: 1000
						});
					} else {
						this.nearbyUserData = this.nearbyUserData.concat(res.list);
						if(res.list.length>20){
							this.allPage = this.allPage+1;
						}
					}
				
					me.$util.closeIndicator(me);
					me.refresher_triggered=false;
				}).catch(err => {
					if(is_refresh){
						uni.showToast({
							title: '刷新失败',
							image: '../../static/error.png',
							duration: 1000
						});
					}
					console.log(err);
				});
			},
			select(index){
				uni.navigateTo({
					url:"../../pages1/contacts/profile?uid="+me.nearbyUserData[index].user_id
				});
			},
		}
	}
</script>

<style>
.cu-list.menu-avatar>.cu-item .content{
	left: 114upx;
	width: calc(100% - 24upx - 70upx - 20upx - 60upx );
}
</style>

